import React from 'react';
import $ from 'jquery';

import NavTitle from './NavTitle.jsx';
import PointLayerControl from './maplayers/PointLayer.jsx';
import RegionLayerControl from './maplayers/RegionLayer.jsx';


class NavLeft extends React.Component{  
  static propTypes: {
    refreshRegionsOnMap: PropTypes.func.isRequired,
    refreshPointsOnMap: PropTypes.func.isRequired,
    selectRegion: PropTypes.func.isRequired,
    selectPoint: PropTypes.func.isRequired,
  }

  constructor(props) {
    super(props);    

    this.state = {
        regions: [],
        points: []
    }

    this.loadRegionData = this.loadRegionData.bind(this);
    this.loadPointData = this.loadPointData.bind(this);
  }

  componentDidMount() {
    this.loadPointData();
    this.loadRegionData();
  }

  loadRegionData() {
    var that = this;
    $.ajax('/src/data/data-region.json')
    .done(function(data){
        that.setState({
            regions: data.result
        });
        that.props.refreshRegionsOnMap(data.result);
    });
  }

  loadPointData() {
    var that = this;
    $.ajax('/src/data/data-points.json')
    .done(function(data){
        that.setState({
            points: data.result.records
        });
        that.props.refreshPointsOnMap(data.result.records);
    });
  }

  selectRegion(region, type) {
    this.props.selectRegion(region, type);
  }

  selectPoint(point, type) {
    this.props.selectPoint(point, type);
  }


  render() {
   
    return (
      <div className="nav-vertical" id="navvertical">
        <NavTitle />
        <div className="layers-control">
          <PointLayerControl ref="pointcontrol"
            titleName="网点图层" 
            data={this.state.points}
            selectPoint={this.selectPoint.bind(this)}
            clickedPoint={this.props.clickedPoint}
          />
          <RegionLayerControl ref="regioncontrol"
            titleName="区划图层"
            data={this.state.regions} 
            selectRegion={this.selectRegion.bind(this)}
            clickedRegion={this.props.clickedRegion}
          />
        </div>
      </div>
    );
  }
};

export default NavLeft;




